<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo/demo.css">
	<script type="text/javascript" src="../jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<style>
		body{padding: 0;margin: 0}
	</style>
</head>
<body>
	<div class="easyui-layout" style="width:700px;height:350px;" data-options="fit:true">
		<!--<div data-options="region:'north'" style="height:50px"></div>-->
		<div data-options="region:'south',split:true" style="height:50px;"></div>
		<div data-options="region:'west',split:true" title="West" style="width:200px;">
			<div class="easyui-accordion" style="width:500px;height:300px;" data-options="fit:true">
				<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
					<div class="easyui-panel" style="padding:5px">
						<ul class="easyui-tree about-tree">
							<li iconCls="icon-large-picture">
								<a href="javascript:void(0)" data-icon="icon-large-picture" data-link="user.html" iframe="1">用户管理</a>
							</li>
							<li iconCls="icon-large-shapes">
								<a href="javascript:void(0)" data-icon="icon-large-shapes" data-link="classify.html" iframe="1">分类管理</a>
							</li>
							<li iconCls="icon-large-smartart">
								<a href="javascript:void(0)" data-icon="icon-large-smartart" data-link="news.html" iframe="1">新闻管理</a>
							</li>

						</ul>
					</div>
				</div>
				<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
					<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
				</div>
				<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
					<ul class="easyui-tree">
						<li>
							<span>Foods</span>
							<ul>
								<li>
									<span>Fruits</span>
									<ul>
										<li>apple</li>
										<li>orange</li>
									</ul>
								</li>
								<li>
									<span>Vegetables</span>
									<ul>
										<li>tomato</li>
										<li>carrot</li>
										<li>cabbage</li>
										<li>potato</li>
										<li>lettuce</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			<div class="easyui-tabs" id="center-tabs" data-options="fit:true">
				<div title="首页" data-options="iconCls:'icon-tip'">
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script>
	$(function () {
		$('.about-tree a').bind('click',function () {
		    var title=$(this).text();
		    var href=$(this).attr('data-link');
		    var iconCls=$(this).attr('data-icon');
		    var iframe=$(this).attr('iframe')==1?true:false;
            addTab(title, href, iconCls, iframe);
        })
    })
    function addTab(title, href, iconCls, iframe) {
        var tabPanel=$('#center-tabs');
        //如果不存在这个tab，则添加
        if(!tabPanel.tabs('exists',title)){
            var content='<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
            //frames模式
            if(frames){
                tabPanel.tabs('add',{
                    title:title,
                    content:content,
                    iconCls:iconCls,
                    fit:true,
                    cls:'pd3',
                    closable:true
                });
            }else {
                tabPanel.tabs('add',{
                    title:title,
                    href:href,
                    iconCls:iconCls,
                    fit:true,
                    cls:'pd3',
                    closable:true
                });
            }
        }else {
            tabPanel.tabs('select',title);
            //刷新tabs操作
            var current_tab=tabPanel.tabs('getSelected');
            tabPanel.tabs('update',{
                tab:current_tab,
                options:{
                    content:'<iframe scrolling="auto" frameborder="0" src="'+href+'" style="width: 100%;height:100%;">'
                }
            })
        }
    }
</script>